<template>
	<go-back :title="'我的资料'"></go-back>
	<view class="info">
		<view class="profile-container" v-for="item in arr_name">
			<view class="profile-item">
				<text class="label">头像</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image">
						<image class="avatar" :src="item.img" mode="aspectFill"></image>
					</uni-file-picker>
					<uni-icons type="right" color="#ccc" size="16"></uni-icons>
				</view>
			</view>

			<view class="profile-item">
				<text class="label">昵称</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.name}}</text>
				</view>
			</view>
			<view class="profile-item" @click="editInfoFn('sex')">
				<text class="label">性别</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.sex}}</text>
					<uni-icons type="right" color="#ccc" size="16"></uni-icons>
				</view>
			</view>
			<view class="profile-item" @click="editInfoFn('age')">
				<text class="label">年龄</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.age}}</text>
					<uni-icons type="right" color="#ccc" size="16"></uni-icons>
				</view>
			</view>
			<view class="profile-item" @click="editInfoFn('address')">
				<text class="label">地区</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.address}}</text>
					<uni-icons type="right" color="#ccc" size="16"></uni-icons>
				</view>
			</view>
			<view class="profile-item" @click="editInfoFn('phone')">
				<text class="label">已绑定手机号</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.phone}}</text>
					<uni-icons type="right" color="#ccc" size="16"></uni-icons>
				</view>
			</view>
			<view class="profile-item">
				<text class="label">衣梦空间号</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.email}}</text>
				</view>
			</view>
			<view class="profile-item">
				<text class="label">创建时间</text>
				<view style="display: flex; justify-content: space-between; align-items: center;">
					<text class="value">{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoBack from '../../components/GoBack/GoBack.vue'
	import api from '../../api';
	export default {
		components: {
			GoBack
		},
		data() {
			return {
				// 列表id
				type: "",
				arr_name: [{
					img: "http://127.0.0.1:4000/static/images/2.jpg",
					name: "zhou",
					sex: "男",
					age: "24",
					address: "广东省茂名市",
					phone: "19874060068",
					email: "1806662426@qq.com",
					time: "2024年11月09日",
				}, ],
				// 设置上传图片的样式
				imageStyles: {
					width: "110rpx",
					height: "110rpx",
					// 是否显示边框
					border: false,
					border: {
						color: "#eee",
						width: "2rpx",
						style: 'solid',
						radius: '50%',
					}
				},
			}
		},
		methods: {
			getTimeFn() {
				const timestamp = 1731123390716;
				const date = new Date(timestamp);
				// 获取年、月、日
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以要加 1
				const day = String(date.getDate()).padStart(2, '0');
				const formattedDate = `${year}年${month}月${day}日`;
				// console.log(formattedDate); // 输出: 年-月-日
			},
			async editInfoFn(type) {
				let currentValue;
				switch (type) {
					case 'name':
						currentValue = this.arr_name[0].name;
						break;
					case 'sex':
						currentValue = this.arr_name[0].sex;
						break;
					case 'age':
						currentValue = this.arr_name[0].age;
						break;
					case 'address':
						currentValue = this.arr_name[0].address;
						break;
					case 'phone':
						currentValue = this.arr_name[0].phone;
						break;
					case 'email':
						currentValue = this.arr_name[0].email;
						break;
					case 'time':
						currentValue = this.arr_name[0].time;
						break;
					default:
						currentValue = '';
				}

				uni.showModal({
					title: "编辑个人信息",
					editable: true,
					placeholderText: `请输入${type === 'sex' ? '性别' : type === 'age' ? '年龄' : type === 'address' ? '地区' : '手机号'}`,
					value: currentValue,
					success: (res) => {
						if (res.confirm) {
							// 处理确认操作，例如更新信息
							const newValue = res.content; // 获取用户输入的新值
							let id = uni.getStorageSync("AUTOTOKEN");
							switch (type) {
								case 'sex':
									this.arr_name[0].sex = newValue;
									break;
								case 'age':
									this.arr_name[0].age = newValue;
									break;
								case 'address':
									this.arr_name[0].address = newValue;
									break;
								case 'phone':
									this.arr_name[0].phone = newValue;
									break;
							}
							if (id) {
								if (this.arr_name[0].sex || this.arr_name[0].age || this.arr_name[0]
									.address || this.arr_name[0].phone) {
									// 动态设置对象
									let obj = {
										id: id, // 用户 ID
										[type]: newValue
									}; // 动态属性赋值
									// obj[type] = newValue; // 只更新被修改的字段
									console.log(obj)
									api.editUserInfo({
											obj
										})
										.then(
											content => {
												console.log(content);
											}
										)
								}
							}

						} else if (res.cancel) {
							// 取消
						}
					}
				});
			}
		},
		onLoad() {
			// this.getTimeFn();
		},
	}
</script>

<style lang="scss" scoped>
	.info {
		overflow: hidden;
	}

	.profile-container {
		padding: 20rpx 50rpx;
		margin-top: 120rpx;
		background-color: #fff;
	}

	.profile-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1px solid #f2f2f2;
	}

	.label {
		font-size: 18px;
		color: #333;
	}

	.value {
		font-size: 14px;
		color: #888;
	}

	.avatar {
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
	}

	.arrow {
		font-size: 16px;
		color: #ccc;
	}
</style>